Component({
  data: {
    headWidth: null, // 设置表格的整体宽度，用于水平滚动
    column: [], // 表头标题
    loading:true,
    msg:'本省今年未发布该校招生计划',
    config: { // 表格自定义样式设置
      tableOutBorder: '', // 表格的表框
      tableInBorder: '', // 表格的表框
      tableInBorderLevel: false, // 表格内只显示水平边框
      tableRadius: '', // 表格圆角
      theadHeight: '', // 表头的高度
      theadColor: '#000000', // 表头的字体颜色
      theadBgColor: '', // 表头的背景色
      theadFontSize: '', // 表头的字体大小
      theadFontWeight: '600', // 表头的字体粗细
      theadRadius: '',
      tbodyHeight: '', // 表格 tbody 的高度, 用于垂直滚动
      tbodyColor: '#666666', // 表格行的字体颜色
      tbodyBgColor: '', // 表格行的背景色
      tbodyFontSize: '', // 表格行的字体大小
      tbodyFontWeight: '', // 表格行的字体粗细
      trHeight: '', // 表格行 tr 的高度
      trRadius: '',
      stripe: false, // 表格显示斑马纹
      stripeColor: '', // 表格的斑马纹背景色,
      stripeHeight: '', // 表格斑马纹的高度
    },
  },
  // options: {
  //   multipleSlots: true, // 在组件定义时的选项中启用多slot支持
  //   styleIsolation: 'isolated'//指定特殊的样式隔离选项
  // },
  properties: {
    tabData: { // 父组件传入的表格数据
      type: Array,
      value: []
    },
    isVip:{
     type:Boolean,
     value:false,
    },
    columns: { // 父组件传入的表头标题
      type: Array,
      value: []
    },
    setting: { // 父组件传入的表格自定义样式
      type: Object,
      value: {}
    },
    style: {
      type: String,
      value: ''
    },
    tableWidth: {
      type: Number,
      value: 650
    },
    vip: {
      type:String,
      value:''
    },
   
  },
  observers: {
    'tabData'(val) {
      // console.log('tableData', val)
    },
    'columns'(val) {
      if (val.length !== 0) {
        let width = 0
        let num = 0
        let tableWidth = this.data.tableWidth
        val.forEach((item) => {
          if (item.isFilter) {
            item.isFilter = this.data.vip==''?true:false
          }
          // 判断是否设置了列宽，没有的话赋值默认的宽度 186，单位rpx
          if (!!item.width) {
            width += item.width / 1
          } else {
            // item.width = 186
            width = width + item.width || 186
          }
          // 如果给多列添加了点击事件，则第一个绑定了点击事件的列生效
          if (!!item.onclick && (item.onclick == true || item.onclick == 'true')) {
            num++
            if (num > 1) {
              item.onclick = false
            }
          }
        })
        // 判断table的宽度是否超出屏幕的宽度，超出则赋值固定的宽度，否则赋值百分比
        if (width < tableWidth) {
          width = 100 + '%'
        } else {
          width = width + 'rpx'
        }

        this.setData({
          column: val,
          headWidth: width
        })
      }
    },
    'setting'(val) {
      // 判断传入的表格设置项是否为空
      if (Object.keys(val).length !== 0) {
        for (let key in val) {
          let str = null
          if (key == 'tableInBorderLevel' && (val[key] == true || val[key] == 'true')) {
            str = true
          } else if (key == 'tableInBorderLevel') {
            str = false
          } else {
            str = String(val[key]).replace(/(^\s*)|(\s*$)/g, '')
          }
          if (str != '' && str != null && str != 'null' && str != undefined && str != 'undefined') {
            this.data.config[key] = str
          }
        }
        this.setData({
          config: this.data.config
        })
      }
    }
  },

  methods: {
    markShow(e){
      const {i}=e.currentTarget.dataset
      let {columns}=this.data
      this.triggerEvent("markShow", i)
    },
    hide(msg){
       this.setData({
         loading:false,
         msg
       })
    },
    show(){
      this.setData({
        loading:true,
      })
    },
    seeMore(e){
      const {i}=e.currentTarget.dataset
      let {tabData}=this.data
      tabData[i].sptitle= tabData[i].sptitle+ '   ' +  tabData[i].remark
      tabData[i].show=true
      this.setData({
        tabData
      })
      // this.triggerEvent("markShow", i)
    },
    // 表格某行的点击事件
    btnAction: function (e) {
      let value = e.currentTarget.dataset.value // value：一个包含点击行所有数据的对象
      this.triggerEvent("getCurrentValue", value)
    },
  }
})